import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
// antd
import { Menu } from "antd";
//mport Router from '../../router/index'
// http
import http from '../../utils/request';

const { SubMenu } = Menu;

class AsideMenu extends Component {
    constructor(props){
        super(props);
        this.state = {
            selectedKeys: [],
            openKeys: [],
            router: [],
        };
    }
    
    // 生命周期，接口请求，并过滤路由
    componentDidMount(){
        const pathname = this.props.location.pathname;
        const menuKey = pathname.split("/").slice(0, 3).join('/');
        const menuHigh = {
            selectedKeys: pathname,
            openKeys: menuKey
        }
        this.selectMenuHigh(menuHigh);

        http.get('/menu/list').then(response => {
            this.setState({
                router: response.data.data
            })
        })
    }

    /** 选择菜单  */
    selectMenu = ({ item, key, keyPath, domEvent }) => {
        const menuHigh = {
            selectedKeys: key,
            openKeys: keyPath[keyPath.length - 1]// 数组的长度减1，即是数组的最后一项
        }
        this.selectMenuHigh(menuHigh);
    }

    openMenu = (openKeys) => {
        this.setState({
            openKeys: [openKeys[openKeys.length - 1]]
        })
    }

    /** 菜单高光 */
    selectMenuHigh = ({selectedKeys, openKeys}) => {
        this.setState({
            selectedKeys: [selectedKeys],
            openKeys: [openKeys]
        })
    }

    // 无子级菜单处理
    renderMenu = (item) => {
        return (
            // <Menu.Item key={item.key} icon={<item.icon />} >
            <Menu.Item key={item.key}>
                <Link to={item.key}>
                    <span>{item.title}</span>
                </Link>
            </Menu.Item>
        )
    }

    // 子级菜单处理
    renderSubMenu = (item) => {
        return (
            <SubMenu key={item.key} title={item.title}>
                {
                    item.child && item.child.map(items => {
                        return items.child && items.child.length > 0 ? this.renderSubMenu(items) : this.renderMenu(items);
                    })
                }
            </SubMenu>
        )
    }

    render(){
        const { selectedKeys, openKeys, router } = this.state;
        return (
            <Menu
            onOpenChange={this.openMenu}
            onClick={this.selectMenu}
            defaultOpenKeys={['/index/infomation']}
            defaultSelectedKeys={['/index/resource/slb']}
            theme="dark"
            mode="inline"
            selectedKeys={selectedKeys}
            openKeys={openKeys}
            style={{ height: '100%', borderRight: 0 }}
            >
                {
                    router && router.map(firstItem => {
                        return firstItem.child && firstItem.child.length > 0 ? this.renderSubMenu(firstItem) : this.renderMenu(firstItem);
                    })
                }
            </Menu>
        )
    }
}

export default withRouter(AsideMenu);
